<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <title>vConsole: Common</title>
  <link href="./lib/weui.min.css" rel="stylesheet"/>
  <link href="./lib/demo.css" rel="stylesheet"/>
</head>
<body ontouchstart>
  <div id="page" class="page">
    <a onclick="outputLogs()" href="javascript:;" class="weui_btn weui_btn_default">Output Logs</a>
    <a onclick="changeTheme('dark')" href="javascript:;" class="weui_btn weui_btn_default">Theme: dark</a>
    <a onclick="changeTheme('light')" href="javascript:;" class="weui_btn weui_btn_default">Theme: light</a>
    <a onclick="changeTheme('')" href="javascript:;" class="weui_btn weui_btn_default">Theme: auto</a>
    <a onclick="toggleVConsole()" href="javascript:;" class="weui_btn weui_btn_default">vConsole: show/hide</a>
    <a onclick="toggleSwitch()" href="javascript:;" class="weui_btn weui_btn_default">Switch: show/hide</a>
    <a onclick="switchPosition()" href="javascript:;" class="weui_btn weui_btn_default">Switch: setPosition</a>
    <a onclick="setOption()" href="javascript:;" class="weui_btn weui_btn_default">setOption</a>
    <a onclick="destroy()" href="javascript:;" class="weui_btn weui_btn_default">Destroy</a>
    <a onclick="newVConsole()" href="javascript:;" class="weui_btn weui_btn_default">new VConsole</a>
    <a onclick="existingId()" href="javascript:;" class="weui_btn weui_btn_default">Existing Id</a>
  </div>
</body>
</html>

<script type="module">
import '../dist/vconsole.min.js';

window.vConsole = new window.VConsole({
  // maxLogNumber: 1000,
  // disableLogScrolling: true,
  // theme: 'dark',
  // pluginOrder: ['network'],
  onReady: function() {
    console.log('vConsole: onReady');
  },
  onClearLog: function() {
    console.log('vConsole: onClearLog');
  },
});
</script>

<script>
class FooClass {
  constructor() { this.foo = 'bar'; }
}
function outputLogs() {
  const obj = {
    number: 233,
    string: 'Hi you!\nFoo\t<b>bar!!</b>',
    boolean: true,
    symbolValue: Symbol('foo'),
    bigint: 98979695949n,
    obj: {foo: 'bar'},
    array: [8, 7, 6],
    undefined: undefined,
    func: function foo(a) { alert('b'); },
    class: FooClass,
    classInstance: new FooClass(),
  };
  obj[Symbol('symbolKey')] = 'The key is a symbol.';
  console.log('A common object:', obj);
}

function changeTheme(theme) {
  window.vConsole.setOption('theme', theme);
  console.log('Current Theme:', theme || 'auto');
}

function toggleVConsole() {
  window.vConsole.show();
  setTimeout(() => {
    window.vConsole.hide();
  }, 1000);
}

let showSwitch = true;
function toggleSwitch() {
  showSwitch = !showSwitch;
  showSwitch ? window.vConsole.showSwitch() : window.vConsole.hideSwitch();
  console.info('vConsole switch is show:', showSwitch);
}

function switchPosition() {
  vConsole.setSwitchPosition(20, 20);
  console.info('vConsole switch position:', 20, 20);
}

function setOption() {
  vConsole.setOption('log.a.maxLogNumber', 20);
  vConsole.setOption('log.maxLogNumber', 20);
  vConsole.setOption({ network: { maxNetworkNumber: 30 }});
  vConsole.setOption({ network: { b: 123 }}); // overwrite previous line
  vConsole.setOption({ '__proto__': { a: 1 }, 'prototype': { b: 2 }, 'constructor': 3 });
  vConsole.setOption('__proto__.noOrig', 1);
  vConsole.setOption('prototype.noOrig', 2);
  vConsole.setOption('constructor', () => { console.log('hack') });
  vConsole.setOption('log.__proto__.noOrig', 1);
  console.log(vConsole.option);
}

function newVConsole() {
  const vc = new window.VConsole();
  window.vConsole = vc;
  console.log('newVConsole:', vc);
  console.log('VConsole.instance:',  window.VConsole.instance === vc, window.VConsole.instance);
}

function destroy() {
  window.vConsole.destroy();
  console.log('vConsole is destroyed');
}

function existingId() {
  window.vConsole.destroy();
  const div = document.createElement('DIV');
  div.id = '__vconsole';
  document.body.append(div);

  window.vConsole = new window.VConsole();
}
</script>